<template>
    <basic-container>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i> 员工管理</el-breadcrumb-item>
                <el-breadcrumb-item><i class="el-icon-date"></i> 新增</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <avue-form ref="form" v-model="form" :option="option" @reset-change="emptyChange" @submit="submit">
            <template slot-scope="scope" slot="avatar">
                <div>
                    <div v-for="(item,index) in photoList" class="thumbUrl">
                        <img :src="item.picUrl"/>
                        <div class="hover_show">
                            <i class="el-icon-delete" @click="handlePictureRemove(index)"></i>
                        </div>
                    </div>
                    <div class="select_img" @click="sleImg=true" style="float: left;"><i class="el-icon-plus"></i></div>
                    <el-dialog title="选择图片" :visible.sync="sleImg" style="text-align: left;">
                        <sel-img-photo-gallery ref="selImg" type="12" @select="onSelectImgs"></sel-img-photo-gallery>
                    </el-dialog>
                </div>
            </template>
            <template slot-scope="scope" slot="deptId">
                <avue-input-tree
                        v-model="form.deptId"
                        :dic="treeDeptData"
                        :props="defaultProps"
                        :defaultExpandAll="true"
                        type="tree"
                        placeholder="请选择所属部门"/>
            </template>
            <template
                    slot="roleIds"
                    slot-scope="scope">
                <avue-select
                        v-model="role"
                        :dic="rolesOptions"
                        :props="roleProps"
                        multiple
                        placeholder="请选择角色"/>
            </template>
            <template
                    slot="areaSns"
                    slot-scope="scope">
                <avue-input-tree
                        v-model="areaSnList"
                        :dic="areaTreeData"
                        :props="areaProps"
                        type="tree"
                        multiple
                        placeholder="请选择区域"/>
            </template>
        </avue-form>
    </basic-container>
</template>

<script>
    import {addObj} from '@/api/crm/marketemployee';
    import {deptRoleList} from '@/api/admin/role';
    import {fetchTree} from '@/api/admin/dept';
    import {formOption} from '@/const/crud/crm/form_option/employee';
    import {areaTree} from '@/api/crm/area';
    import selImgPhotoGallery from '../../components/pds/common/sel_img_photogallery';


    export default {
        data() {
            return {
                form: {},
                role: [],
                areaSnList: [],
                option: formOption,
                treeDeptData: [],
                rolesOptions: [],
                areaTreeData: [],
                roleProps: {
                    label: 'roleName',
                    value: 'roleId'
                },
                defaultProps: {
                    label: 'name',
                    value: 'id'
                },
                areaProps: {
                    label: 'areaName',
                    value: 'areaSn'
                },
                photoList: [],
                sleImg: false
            }
        },
        components: {
            selImgPhotoGallery,
        },
        mounted() {
        },
        created() {
            this.getNodeData();
            this.handleDept();
            this.fetchAreaTree();
        },
        methods: {
            onSelectImgs(imgs) {
                // 只要1张
                this.photoList.splice(0, 1);
                this.photoList.push({id: imgs[0].id, picUrl: imgs[0].picUrl})
                this.sleImg = false;
            },
            // 删除el-upload的图片
            handlePictureRemove(index) {
                this.photoList.splice(index, 1)
            },
            fetchAreaTree() {
                areaTree().then(response => {
                    this.areaTreeData = response.data.data;
                });
            },
            getNodeData() {
                deptRoleList().then(response => {
                    this.rolesOptions = response.data.data.filter(item => item.roleCode.toUpperCase() !== "ROLE_ADMIN");
                })
            },
            handleDept() {
                fetchTree().then(response => {
                    this.treeDeptData = response.data.data
                })
            },
            emptyChange() {
                this.form = {};
            },
            submit() {
                let avatar = this.photoList[0] ? this.photoList[0].picUrl : null;
                let params = {
                    areaSns: this.areaSnList.join(","),
                    roleIds: this.role.join(","),
                    deptId: this.form.deptId ? String(this.form.deptId) : "",
                    avatar: avatar
                };
                addObj(Object.assign({}, this.form, params)).then(response => {
                    if (response.data.code === 0) {
                        this.$message.success('添加成功')
                        let that = this;
                        setTimeout(function () {
                            that.$store.commit('DEL_ONE_TAG', that.$route);
                            that.$router.go(-1);
                        }, 2000);
                    } else {
                        this.$message.success(response.data.msg)
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .crumbs {
        margin: 20px 10px;
    }

    .thumbUrl {
        width: 150px;
        height: 150px;
        position: relative;
        line-height: 146px;
        float: left;
        margin-right: 15px;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #c0ccda;
        text-align: center;
    }

    .thumbUrl img {
        width: 100%;
        height: 100%;
    }

    .thumbUrl .hover_show {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        display: none;
    }

    .thumbUrl:hover .hover_show {
        display: block;
    }

    .thumbUrl .hover_show i {
        color: #fff;
        margin: 0 10px;
        cursor: pointer;
    }

    .select_img {
        width: 148px;
        height: 148px;
        line-height: 146px;
        border: 1px dashed #c0ccda;
        background-color: #fbfdff;
        font-size: 28px;
        color: #8c939d;
        cursor: pointer;
        border-radius: 6px;
        text-align: center;
    }
</style>


